<template>
  <text class="sub-title"> — 教师授课信息</text>
  <title1></title1>
  <Navigation></Navigation>
  <el-container style="position: fixed;top: 120px;left: 500px;">
    <el-text>请输入教师工号:</el-text>
    <el-input v-model="tno" style="padding-left: 10px; width: 120px" placeholder="" />
    <el-text style="margin-left: 30px">选择学年学期:</el-text>
    <el-tree-select
        v-model="sel_cyear"
        :data="cyear"
        :render-after-expand="false"
        style="width: 180px;margin-left: 10px"
    />
    <el-button plain @click="search" style="margin-left: 50px">
      查询
    </el-button>
  </el-container>
  <el-table :data="tableData"  class="tc_table" border style=" width: 75%">
    <el-table-column
        type="index"
        label="序号"
        width="60"
        align="center"
    ></el-table-column>
    <el-table-column
        prop="c_no"
        label="课程号"
        min-width="80px"
        align="center"
        :show-overflow-tooltip="true"
    ></el-table-column>
    <el-table-column
        prop="c_name"
        label="课程名"
        min-width="80px"
        align="center"
        :show-overflow-tooltip="true"
    ></el-table-column>
    <el-table-column
        prop="c_time"
        label="上课时间"
        min-width="100px"
        align="center"
        :show-overflow-tooltip="true"
        :formatter="formatCourseList"
    ></el-table-column>
    <el-table-column
        prop="c_address"
        label="上课地点"
        min-width="100px"
        align="center"
        :show-overflow-tooltip="true"
    ></el-table-column>
    <el-table-column
        prop="c_count"
        label="课程人数"
        min-width="100px"
        align="center"
    ></el-table-column>
    <el-table-column
        prop="c_oper"
        label="操作"
        min-width="100px"
        align="center"
    >
      <template #default="scope">
        <el-button
            type="danger"
            size="small"
            @click="confirmDelete(scope.row.c_no)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

</template>

<script>
import { el } from 'element-plus/es/locales.mjs';
import title1 from "../components/title.vue";
import Navigation from "../components/navigation_adm.vue";
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";

const cyear = [
  {
    value: '24年秋',
    label: '24秋',
  },
  {
    value: '24年春',
    label: '24春',
  },
  {
    value: '23年秋',
    label: '23秋',
  },
  {
    value: '23年春',
    label: '23春',
  },
  {
    value: '22年秋',
    label: '22秋',
  },
  {
    value: '22年春',
    label: '22春',
  },
];

export default {
  name: 'adm_tcourse',
  components: {
    Navigation,
    title1
  },
  data(){
    return{
      cyear,
      sel_cyear:'',
      tno:'',
      tableData:[]
    }
  },
  mounted() {
    document.title = '管理员后台系统'; // 动态设置页面标题
    const token = localStorage.getItem('token'); // 确保 token 已正确存储
    const userNo = sessionStorage.getItem('UserNo'); // 确保 UserNo 已正确存储
    if (!token || !userNo) {
      alert('缺少必要的认证信息，请重新登录。');
      this.$router.push({ name: "Login" });
    }
  },
  watch: {
    sel_cyear() {
      this.tableData = []; // 清空 tableData
    }
  },
  methods: {
    async search() {
      try {
        const token = localStorage.getItem('token'); // 确保 token 已正确存储
        const userNo = sessionStorage.getItem('UserNo'); // 确保 UserNo 已正确存储
        if (!token || !userNo) {
          alert('缺少必要的认证信息，请重新登录。');
          await this.$router.push({name: "Login"});
          return;
        }
        const selectedCyear = String(this.cyear.find(item => item.value === this.sel_cyear)?.value);
        console.log(selectedCyear, userNo, token)
        const response = await axios.post(`${import.meta.env.VITE_API_BASE_URL}/admin/teaCourseInfo`, {
          t_no: this.tno,
          selCyear: selectedCyear,
        }, {
          headers: {
            token: token,
            'Content-Type': 'application/json'
          },
        });
        console.log(response.data.code)
        if (response.data.code === '200') {
          ElMessage({
            message: '查询成功',
            type: 'success',
          });
          console.log(response.data)
          const coursesDict = response.data.data;
          this.tableData = Object.values(coursesDict);
          console.log(this.tableData)
        } else {
          alert('查询出错');
        }
      } catch (error) {
        console.error('查询失败', error);
        alert('查询出错，请稍后再试');
      }
    },
    async deleteCourse(courseId) {
      try {
        const token = localStorage.getItem('token');
        if (!token) {
          alert('缺少必要的认证信息，请重新登录。');
          await this.$router.push({name: "Login"});
          return;
        }
        const response = await axios.post(`${import.meta.env.VITE_API_BASE_URL}/admin/delcourse`, {
          c_no: String(courseId),
          s_no:this.tno
        }, {
          headers: {
            token: token,
            'Content-Type': 'application/json'
          },
        });
        if (response.data.code === '200') {
          ElMessage({
            message: '删除成功',
            type: 'success',
          });
          // 重新加载数据
          await this.search();
        } else {
          alert('删除出错');
        }
      } catch (error) {
        console.error('删除失败', error);
        alert('删除出错，请稍后再试');
      }
    },
    confirmDelete(courseId) {
      ElMessageBox.confirm(
          '确定要删除该教师所授课程吗?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(() => {
        this.deleteCourse(courseId);
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消删除',
        });
      });
    }
  }
}

</script>

<style scoped>
.sub-title{
  z-index: 2;
  position: fixed;
  top: 35px;
  left: 380px;
  color: #0e4bbd;
  font-size: 30px;
  font-weight: normal;
}
.tc_table{
  position: fixed;
  top: 200px;
  left: 280px;
}
</style>